package com.frxuexi.mdm2207.demo

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Preview
@Composable
fun Demo04() {
    val pagerState = rememberPagerState {
        5
    }
    val imgs = listOf<String>(
        "https://img0.baidu.com/it/u=3710358681,2408493409&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734022800&t=3d8ab736865c1560039d4e114ff2e5fd",
        "https://img1.baidu.com/it/u=4214113141,2036563917&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734022800&t=05441f90fe75b49d73c1c787e9a5be1a",
        "https://img2.baidu.com/it/u=553712968,3437602612&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734022800&t=6d048e7d395f40ebbea1aa14da3c2b4d",
        "https://img2.baidu.com/it/u=1134184213,2435039814&fm=253&fmt=auto?w=1062&h=800",
        "https://img1.baidu.com/it/u=2693733305,4035903587&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734022800&t=7290da56ba6f835aebaa3f07e2cb58d8"
    )
    var modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
    Column(modifier = modifier) {
        HorizontalPager(state = pagerState,verticalAlignment=Alignment.Top) {
            AsyncImage(model = imgs.get(it), contentDescription = "",
                modifier = modifier, contentScale = ContentScale.Crop)
        }
        Row(Modifier.fillMaxWidth().offset(y = -30.dp), horizontalArrangement = Arrangement.Center) {
            repeat(pagerState.pageCount){
                var color = if(pagerState.currentPage==it) Color.DarkGray else Color.LightGray
                Box(modifier = Modifier.size(16.dp).padding(3.dp).background(color, CircleShape))
            }
        }
    }

}